<template>
  <div class="consult">
    咨询管理
    <el-button @click="handleAdd, (dialogVisible = true), (flags = true)"
      >添加</el-button
    >
    <el-select v-model="value" @change="changeSelect" placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.label">
      </el-option>
    </el-select>
    <el-table :data="result.length?result:tableData" border style="width: 100%">
      <el-table-column fixed prop="id" label="序号" width="150">
      </el-table-column>
      <el-table-column prop="name" label="秒杀名称" width="150">
      </el-table-column>
      <el-table-column prop="time" label="秒杀时段" width="200">
      </el-table-column>
      <el-table-column label="轮播图" width="180">
        <template slot-scope="scope">
          <img style="height: 80px; width: 80px" :src="scope.row.img" alt="" />
        </template>
      </el-table-column>
      <el-table-column prop="flag" label="状态" width="200">
        <template slot-sc0ope="scope">
          <el-switch
            v-model="scope.row.flag"
            active-value="1"
            inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column prop="time" label="创建时间" width="200">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="
              handleEdit(scope.$index, scope.row),
                (dialogVisible = true),
                (flags = false)
            "
            >编辑</el-button
          >
          <el-button size="mini" @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span slot="footer" class="dialog-footer">
        <el-input v-model="book" placeholder="请输入内容"></el-input>
        <el-input v-model="name" placeholder="请输入内容"></el-input>
        <el-input v-model="time" placeholder="请输入内容"></el-input>
        <el-input v-model="flag" placeholder="请输入内容"></el-input>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleOK">确 定</el-button>
      </span>
    </el-dialog>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage1"
        :page-sizes="[2, 4, 8, 16]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.total"
      >
      </el-pagination>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex"
import axios from "axios";
export default {
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      book: "",
      name: "",
      time: "",
      flag: "",
      flags: false,
      id: null,
      currentPage1: 1,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      arr: {
        pagesize: 2,
        pagenum: 1,
        keyword: "",
      },
      options: [{
          value: '选项1',
          label: '全部'
        }, {
          value: '选项2',
          label: '开启'
        }, {
          value: '选项3',
          label: '关闭'
        }],
        value: '',
        result: [],
    };
  },
  created() {
    this.getlist();
  },
  computed: {
    ...mapState(['tableData','total'])
  },
  methods: {
    ...mapActions(['get_list']),
    getlist() {
      axios.get("/list1").then((res) => {
        this.tableData = res.data.data.data;
        console.log(res);
      });
    },
    changeSelect(val) {
        if(val==='开启') {
         this.result = this.tableData.filter(item=>item.flag==='1')
        }else if(val==='关闭') {
         this.result = this.tableData.filter(item=>item.flag==='0')
        }else {
          this.result = []
        }
      console.log(val)
    },
    handleClick(row) {
      console.log(row);
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    handleEdit(index, row) {
      (this.book = row.book),
        (this.name = row.name),
        (this.time = row.time),
        (this.flag = row.flag),
        (this.id = row.id)
        console.log(index, row);
    },
    //删除
    async handleDelete(index, row) {
      axios.delete(`/dellist3/${row.id}`);
      this.tableData.splice(index,1)
      console.log(index, row);
    },
    changeSelect(val) {
        if(val==='开启') {
         this.result = this.tableData.filter(item=>item.flag==='1')
        }else if(val==='关闭') {
         this.result = this.tableData.filter(item=>item.flag==='0')
        }else {
          this.result = []
        }
      console.log(val)
    },
    handleAdd() {},
    //分页
    handleSizeChange(val) {
      console.log(val)
      this.arr.pagesize = val;
      this.get_list(this.arr);
    },
    handleCurrentChange(val) {
      this.arr.pagenum = val;
      console.log(this.arr.pagenum, `当前页: ${val}`);
      this.get_list(this.arr);
    },
    //确定
    handleOK() {
      if (this.flags) {
        //添加
        axios.post("/addlist3", {
          name: this.name,
          time: this.time,
          book: this.book,
          id: this.id,
          flag: this.flag,
        });
      } else {
        //编辑
         axios.put("/eddlist3", {
          name: this.name,
          time: this.time,
          book: this.book,
          flag: this.flag,
          id: this.id,
        }); 
      }
      this.name="",
      this.time="",
      this.book="",
      this.flag="",
      this.getlist()
      this.dialogVisible = false;
    },
  },
};
</script>

<style>
</style>
